<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="shortcut icon" href="gw-simulator-logo.png" type="image/png"/>
    <title>万能网关模拟器::1.0.0</title>
    <link href="https://cdn.staticfile.org/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
    <link href="https://cdn.staticfile.org/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/app.css" rel="stylesheet"/>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="flexable page-header">
    <img src="gw-simulator-logo.png" style="width: 96px; height: 96px;">
    <div class="auto-grow column-mode">
        <h1>万能网关模拟器 <small>v1.0.0<small>
            <a title="复制网关URL" id="btn-copy-url" class="copyable"
               style="font-size: small; cursor: pointer; color: #666;"><i class="fa fa-fw fa-copy"></i></a></small>
        </small></h1>
        <div class="fake">假的。你在这里看到的一切都是假的。请勿轻易相信您在这里看到的一切！<br/>
            妈妈再也不用担心我不能测试数据下行了。
        </div>
    </div>
</div>
<div id="if-info" class="flexable padding-15"></div>
<div class="padding-15">
    <ul id="log-list"></ul>
    <a id="show-more" style="display: block; cursor: pointer; text-align: center;">
        <i class="fa fa-fw fa-angle-double-down"></i> 点击加载更多...
    </a>
</div>
<script>
if (!('format' in Date.prototype)) {
    Date.prototype.format = function (fmt) {
        let ret;
        fmt = fmt || 'yyyy-MM-dd';
        const opt = {
            "y+":  this.getFullYear().toString(),        // 年
            "M+": (this.getMonth() + 1).toString(),      // 月
            "d+":  this.getDate().toString(),            // 日
            "H+":  this.getHours().toString(),           // 时
            "m+":  this.getMinutes().toString(),         // 分
            "s+":  this.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            }
        }
        return fmt;
    };
}
const TEMPLATES = {
    di: '    <div class="gateway-method flexable gwm-${method}">${method}</div>\n' +
        '    <div class="padding-15">\n' +
        '        <div class="gateway-name">${name}</div>\n' +
        '        <div class="gateway-uri">${uri}</div>\n' +
        '    </div>',
    item: '    <li>\n' +
        '        <table class="log-item">\n' +
        '            <tr>\n' +
        '                <td class="log-label">URI</td>\n' +
        '                <td class="log-uri">${uri}</td>\n' +
        '                <td class="log-label">Request Time</td>\n' +
        '                <td>${requestTime}</td>\n' +
        '            </tr>\n' +
        '            <tr>\n' +
        '                <td class="log-label">Body</td>\n' +
        '                <td colspan="3"><pre>${body}</pre></td>\n' +
        '            </tr>\n' +
        '        </table>\n' +
        '    </li>'
};
$ (function () {
    function applyTemplate (target, template) {
        let text = template.replace (/\$\{(.*?)}/g, name => {
            name = name.substring (2, name.length - 1);
            if (name in target) {
                if (name === 'body') {
                    let v = target [name], o = JSON.parse (v);
                    return JSON.stringify (o, null, 4);
                }
                return target [name];
            }
            return name;
        });
        return $(text);
    }

    function loadData () {
        if (loadable) {
            $.get ('backend/logs', params).then (res => {
                let list = $ ('#log-list');
                res.data.forEach (item => {
                    item.requestTime = new Date (item.requestTime).format ('yyyy-MM-dd HH:mm:ss');
                    applyTemplate (item, TEMPLATES.item).appendTo (list);
                });
                params.pn ++;
                if (res.data.length === 0 || res.data.length < params.ps) {
                    loadable = false;
                    if (!loadable)
                        $('#show-more').hide ();
                }
            });
        }
    }

    $(window).scroll (function(){
        let top = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)
        let total = parseFloat($(window).height()) + parseFloat(top);
        if(($(document).height()) <= total && loadable) {
            loadData ();
        }
    });

    let text = location.search, params = {pn: 1, ps: 30}, a, loadable = true;
    if (text[0] === '?') text = text.substring (1);
    text.split ('&').forEach (p => {
        a = p.split ('=');
        params [a[0]] = decodeURIComponent (a[1]);
    });

    $.get ('backend/di/' + params['if-id']).then (res => {
        applyTemplate (res.data, TEMPLATES.di).appendTo ($('#if-info'));
    });

    loadData ();
});
</script>
</body>
</html>